<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WMTS-3857</title>
    <!-- 引入OpenLayers库 -->
    <link rel="stylesheet" href="https://data.sunbt.ltd/lib/ol/v6.15.1/css/ol.css" type="text/css">
    <script src="https://data.sunbt.ltd/lib/ol/v6.15.1/build/ol.js"></script>
</head>
<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    html, body, #map {
        width: 100%;
        height: 100%;
    }
</style>
<body>
<div id="map" class="map"></div>
<script>
    // 创建 WMS 图层
    const wmsLayer = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geowebcache/service/wms?&WIDTH=256&HEIGHT=256', // GeoWebCache WMS 服务 URL
            params: {
                'LAYERS': 'jyl', // 替换为实际的图层名称
                'FORMAT': 'image/jpeg',
                'TILED': true,
                'VERSION': '1.1.1',
                'REQUEST': 'GetMap',
                'STYLES': '',
                'EXCEPTIONS': 'application/vnd.ogc.se_inimage',
                'SRS': 'EPSG:3857'
            },
            serverType: 'geoserver',
            crossOrigin: 'anonymous' // 根据需要设置跨域选项
        })
    });

    // LODInfos 配置的分辨率数组
    const resolutions = [
        156543.03392800014, 78271.516963999937, 39135.758482000092,
        19567.879240999919, 9783.9396204999593, 4891.9698102499797,
        2445.9849051249898, 1222.9924525624949, 611.49622628137968,
        305.74811314055756, 152.87405657041106, 76.437028285073239,
        38.21851414253662, 19.10925707126831, 9.5546285356341549,
        4.7773142679493699, 2.3886571339746849, 1.1943285668550503,
        0.59716428355981721, 0.29858214164761665, 0.14929107082380833
    ];

    // 创建地图
    const map = new ol.Map({
        target: 'map',
        layers: [
            wmsLayer
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([119.0153, 33.6104]), // 淮安市的经纬度
            zoom: 10, // 设置初始缩放级别
            projection: 'EPSG:3857', // 设置投影
            resolutions: resolutions // 使用 LODInfos 配置的分辨率
        })
    });
</script>
</body>
</html>